Page 73 - 2629_Devagiri_C-6

CANVAS RESPONSIVENESS WITH UI COMPONENTS Step 5 Click on the User Interface component.

In MIT App Inventor, the Canvas can work with buttons, labels and text boxes to create interactive Step 6 Drag and drop Button1 into the HorizontalArrangement.
apps that respond to user actions in real time.
Step 7 Click on Button1 to edit its properties on the right-side panel: Text to Red, FontBold,
Examples:
BackgroundColor to Red, FontSize to 20, Shape to Rounded and TextColor to Black.
Buttons: Change something on the Canvas, like colour or position, when clicked.
Similarly, add Button2 and Button3 into the same HorizontalArrangement and set
Labels: Display messages based on Canvas events, like a touch in a specific area. Text: Blue and Green, BackgroundColor: Blue and Green, FontSize: 20 or larger,
Text Boxes: Enables inserting text typed by the user. FontBold to Checked, Shape: Rounded, TextColor: Black.

Step 8 Add Button4 from the User Interface drawer below the HorizontalArrangement.
RAPID RECALL Tick ( ) if you know this.
Step 9 Click on Button4 and set: Text to Reset, BackgroundColor to Orange, FontSize to 20

1. The Click event is triggered when the user taps on an element. or larger, FontBold to Checked, Shape to Rounded and TextColor to Black.

2. Buttons are used to change something on the Canvas.

CREATING AN APP USING TOUCH EVENTS

The Magic_Pad app lets you draw with your finger, change colours and reset the screen like a
digital drawing book. It helps young learners practice drawing, handwriting and creativity while
improving hand control in a safe, educational way.

To create the Magic_Pad app, follow these steps:

Step 1 Create new project in the MIT App Inventor. Step 10 Click on the Drawing and Animation component from the Palette.

Step 2 Change the name of the screen to Magic_Pad in the Title textbox, adjust Step 11 Drag and drop a Canvas onto the Viewer below the Reset button.
AlignHorizontal to Center:3 and AlignVertical to Top:1 in the Properties pane. Step 12 Click on the Canvas and set the Width and Height to Fill Parent.

Step 3 Click on the Layout component.
Step 4 Drag and drop HorizontalArrangement into the phone screen.

71
Touch to Motion with MIT